$(function () {


  // 
  console.log("页面开始加载了");
  // 防止拖拽 a标签或者图片
  document.ondragstart = function () {
    return false;
  }



  //1. 列表渲染
  var page = 1;
  var pageSize = 30;
  var render = function () {
    $.ajax({
      type: "get",
      // 分页接口  需要改动  ！！！！！！！！！！
      url: "/category/querySecondCategoryPaging",
      data: {
        page: page,
        pageSize: pageSize
      },
      success: function (data) {
        $("tbody").html(template("tpl", data));

        //2. 分页
        $("#paginator").bootstrapPaginator({
          bootstrapMajorVersion: 3,
          currentPage: page,
          totalPages: Math.ceil(data.total / data.size),
          onPageClicked: function (a, b, c, p) {
            page = p;
            render();
          }
        });


      }
    });
  }
  render();




  //2. 点击添加分类按钮，显示模态框
  $(".btn_add").on("click", function () {
    $("#secondModal").modal("show");
  });


  // 3 图片预览功能   
  lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true,
    'positionFromTop': 250
  })


  // 5 文件下载功能
  function downloadImage(src) {
    var a = $("<a></a>").attr("href", src).attr("download", "img.png").appendTo("body");
    a[0].click();
    a.remove();
  }

  var arrpicsrc = [];
  // console.log($('.picbox>ul .downloadcheckbox'));
  $('.picbox>ul').on('change', 'input:checkbox', function () {
    // console.log(1221);
    // 监听是否选中 
    // 获取到 该input  并从 data-id 里面 获取 图片id
    // console.log(this);
    // var picid=$(this).attr("data-id");
    var picsrc = $(this).attr("data-src");
    if (this.checked) {
      // console.log($(this).attr("data-id"));
      arrpicsrc.push(picsrc);
    } else {
      if (arrpicsrc.indexOf(picsrc) !== -1) {
        for (var i = 0; i < arrpicsrc.length; i++) {
          if (arrpicsrc[i] === picsrc) {
            console.log("去掉重复的");
            arrpicsrc.splice(i, 1);
          }
        }
      }
    }
    // 获取到 图片id的 数组  
    console.log(arrpicsrc.length);

    // 只要arrpicsrc数组的长度>1  则显示 打包下载按钮 
    if(arrpicsrc.length===0){
      console.log("类名");
      console.log($('#startdownload'));
      $('#startdownload').addClass("hide").removeClass('show');
    }else{
      console.log("显示");
      $('#startdownload').addClass("show").removeClass('hide');
    }
  })

  //实现全选反选
  $("#chooseAll").on('click', function () {

    $(".picbox>ul input:checkbox").prop("checked", $(this).prop('checked'));
    if ($(this).prop('checked')) {
      // 触发 事件 以便上面 可以 监听的到
      $(".picbox>ul input:checkbox").prop('checked', true).change();
    } else {
      $(".picbox>ul input:checkbox").prop('checked', false).change();
    }
  })
  $(".picbox>ul input:checkbox").on('click', function () {
    //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
    if ($(".picbox>ul input:checkbox").length === $(".picbox>ul input:checked").length) {
      $("#chooseAll").prop("checked", true);
    } else {
      $("#chooseAll").prop("checked", false);
    }
  });


  // 6 图片懒加载功能
  $(function () {
    $(".picbox img").lazyload({
      // placeholder : "../images/none.png", //用图片提前占位
      // 淡入效果 
      effect: "fadeIn"
    });
  });



  // 7 文件预览效果 ！！！




  // throw new Error("Something went badly wrong!");



  // $("#fileupload").fileupload({

  //   dataType: "json",
  //   done: function (e, data) {


  //     console.log("上传图片");
  //     //结果就是data.result
  //    
  //     //6.1 修改img_box下的img的src属性
  //     console.log(data.result.picAddr);
  //     // $(".img_box img").attr("src", data.result.picAddr);

  //     //6.2 把图片的地址赋值给brandLogo
  //     // $("[name='upload']").val(data.result.picAddr);

  //     //6.3 手动让brandLogo校验成功
      // $form.data("bootstrapValidator").updateStatus("uopload", "VALID");
  //   },
  //   // 显示 上传进度 
  //   progressall: function (e, data) {
  //     var progress = parseInt(data.loaded / data.total * 100, 10);
  //     $('#progress .bar').css(
  //       'width',
  //       progress + '%'
  //     );
  //   }
  // });

  









});